<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>404 — 系统异常</title>
        <meta name="theme-color" content="#00ff9c" />
        <meta name="color-scheme" content="dark" />

        <!-- Fonts -->
        <link
            href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&family=VT323&display=swap"
            rel="stylesheet"
        />

        <!-- CSS Libraries -->
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />

        <!-- Icons -->
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />

        <style>
            :root {
                --bg: #030b0a;
                --bg2: #051614;
                --fg: #e8fff6;
                --muted: #7af7cf;
                --primary: #00ff9c;
                --primary-2: #00e0ff;
                --danger: #ff2f6b;
                --glow: 0 0 12px rgba(0, 255, 156, 0.45),
                    0 0 32px rgba(0, 255, 156, 0.25),
                    0 0 64px rgba(0, 255, 156, 0.15);
                --scanline: linear-gradient(
                    rgba(255, 255, 255, 0.08) 50%,
                    rgba(0, 0, 0, 0.1) 50%
                );
                --noise: url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'>\
        <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter>\
        <rect width='100%' height='100%' filter='url(%23n)' opacity='0.08'/>\
      </svg>");
            }
            * {
                box-sizing: border-box;
            }
            html,
            body {
                width: 100%;
                height: 100%;
                background: radial-gradient(
                    1200px 800px at 70% 20%,
                    #061b19 10%,
                    var(--bg) 60%,
                    #000 100%
                );
                color: var(--fg);
                margin: 0;
                overflow: hidden;
                font-family: 'Share Tech Mono', ui-monospace, SFMono-Regular,
                    Menlo, Consolas, monospace;
                letter-spacing: 0.3px;
            }
            /* Scanlines + CRT curvature */
            .crt {
                position: fixed;
                inset: 0;
                pointer-events: none;
                background-image: var(--scanline);
                background-size: 100% 2px;
                mix-blend-mode: soft-light;
                opacity: 0.25;
                animation: scan 8s linear infinite;
            }
            .crt-vignette {
                position: fixed;
                inset: 0;
                pointer-events: none;
                background: radial-gradient(
                    ellipse at center,
                    rgba(0, 0, 0, 0) 40%,
                    rgba(0, 0, 0, 0.35) 70%,
                    rgba(0, 0, 0, 0.75) 100%
                );
                filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="f"><feComponentTransfer><feFuncR type="gamma" exponent="1.1"/><feFuncG type="gamma" exponent="1.1"/><feFuncB type="gamma" exponent="1.1"/></feComponentTransfer></filter></svg>#f');
            }
            .noise {
                position: fixed;
                inset: -10%;
                pointer-events: none;
                background-image: var(--noise);
                background-size: 320px 320px;
                opacity: 0.25;
                animation: noiseMove 1.6s steps(2) infinite;
                mix-blend-mode: overlay;
            }
            @keyframes noiseMove {
                0% {
                    transform: translate(0, 0);
                }
                100% {
                    transform: translate(-10%, -10%);
                }
            }
            @keyframes scan {
                0% {
                    background-position: 0 0;
                }
                100% {
                    background-position: 0 100%;
                }
            }

            /* Layout layers */
            canvas#bg3d,
            canvas#matrix {
                position: fixed;
                inset: 0;
                display: block;
            }
            canvas#bg3d {
                z-index: 0;
            }
            canvas#matrix {
                z-index: 1;
                mix-blend-mode: screen;
                opacity: 0.35;
            }

            .wrap {
                position: relative;
                z-index: 3;
                height: 100%;
                display: grid;
                grid-template-rows: auto 1fr auto;
                gap: 16px;
            }
            header {
                padding: 18px 28px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                backdrop-filter: blur(4px) saturate(110%);
                background: linear-gradient(
                    90deg,
                    rgba(0, 255, 156, 0.06),
                    rgba(0, 224, 255, 0.06)
                );
                border-bottom: 1px solid rgba(0, 255, 156, 0.2);
                box-shadow: inset 0 -1px 0 rgba(0, 224, 255, 0.12);
            }
            .brand {
                display: flex;
                align-items: center;
                gap: 12px;
                color: var(--primary);
                text-shadow: var(--glow);
                font-family: Orbitron, sans-serif;
                letter-spacing: 1.2px;
            }
            .brand .icon {
                width: 28px;
                height: 28px;
                border: 2px solid var(--primary);
                border-radius: 50%;
                position: relative;
                box-shadow: var(--glow);
            }
            .brand .icon:before,
            .brand .icon:after {
                content: '';
                position: absolute;
                inset: 5px;
                border: 2px solid var(--primary-2);
                border-radius: 50%;
                filter: drop-shadow(0 0 8px rgba(0, 224, 255, 0.5));
                animation: rot 8s linear infinite;
            }
            .brand .icon:after {
                inset: 9px;
                border-color: var(--primary);
                animation-duration: 13s;
            }
            @keyframes rot {
                from {
                    transform: rotate(0);
                }
                to {
                    transform: rotate(360deg);
                }
            }

            nav .btn {
                margin-left: 10px;
                text-decoration: none;
                color: var(--fg);
                padding: 8px 14px;
                border: 1px solid rgba(0, 255, 156, 0.35);
                border-radius: 6px;
                box-shadow: inset 0 0 12px rgba(0, 255, 156, 0.15),
                    0 0 16px rgba(0, 224, 255, 0.12);
                transition: 0.2s ease;
                position: relative;
                overflow: hidden;
            }
            nav .btn:hover {
                color: #001c13;
                background: linear-gradient(
                    90deg,
                    rgba(0, 255, 156, 0.8),
                    rgba(0, 224, 255, 0.8)
                );
                transform: translateY(-1px);
            }
            nav .btn:before {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(
                    120deg,
                    transparent,
                    rgba(255, 255, 255, 0.15),
                    transparent
                );
                transform: translateX(-120%);
                transition: transform 0.4s;
                mix-blend-mode: screen;
            }
            nav .btn:hover:before {
                transform: translateX(120%);
            }

            main {
                display: grid;
                grid-template-columns: 1.2fr 0.8fr;
                gap: 24px;
                padding: 24px 28px 12px;
                min-height: 0; /* grid overflow */
            }
            @media (max-width: 1080px) {
                main {
                    grid-template-columns: 1fr;
                }
            }

            /* Hero */
            .hero {
                position: relative;
                background: linear-gradient(
                    180deg,
                    rgba(0, 255, 156, 0.06),
                    rgba(0, 224, 255, 0.04) 30%,
                    transparent 100%
                );
                border: 1px solid rgba(0, 255, 156, 0.22);
                border-radius: 16px;
                padding: 28px;
                overflow: hidden;
                box-shadow: 0 0 40px rgba(0, 255, 156, 0.12) inset,
                    0 20px 60px rgba(0, 0, 0, 0.4);
            }
            .glitch {
                font-family: 'VT323', monospace;
                font-size: clamp(64px, 14vw, 200px);
                line-height: 0.9;
                font-weight: 900;
                letter-spacing: 8px;
                color: var(--primary);
                position: relative;
                text-shadow: 0 0 6px rgba(0, 255, 156, 0.8),
                    0 0 22px rgba(0, 255, 156, 0.6),
                    -8px 0 12px rgba(0, 224, 255, 0.35),
                    8px 0 12px rgba(255, 47, 107, 0.3);
                filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
            }
            .glitch::before,
            .glitch::after {
                content: attr(data-text);
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                clip-path: inset(0 0 0 0);
                mix-blend-mode: screen;
                animation: glitchSlice 2.2s infinite linear alternate-reverse;
            }
            .glitch::before {
                color: var(--primary-2);
                transform: translate(2px, -2px);
                text-shadow: -2px 0 rgba(0, 224, 255, 0.7);
            }
            .glitch::after {
                color: var(--danger);
                transform: translate(-2px, 2px);
                text-shadow: 2px 0 rgba(255, 47, 107, 0.7);
                animation-duration: 1.7s;
            }
            @keyframes glitchSlice {
                0% {
                    clip-path: inset(0 0 90% 0);
                }
                10% {
                    clip-path: inset(0 0 20% 0);
                }
                20% {
                    clip-path: inset(40% 0 42% 0);
                }
                30% {
                    clip-path: inset(10% 0 70% 0);
                }
                45% {
                    clip-path: inset(80% 0 10% 0);
                }
                60% {
                    clip-path: inset(0 0 0 0);
                }
                80% {
                    clip-path: inset(30% 0 30% 0);
                }
                100% {
                    clip-path: inset(75% 0 0 0);
                }
            }

            .subtitle {
                margin-top: 8px;
                font-size: clamp(16px, 2.6vw, 24px);
                color: #bfffee;
                opacity: 0.85;
                text-transform: uppercase;
                letter-spacing: 4px;
                filter: drop-shadow(0 0 6px rgba(0, 224, 255, 0.35));
            }
            .actions {
                margin-top: 22px;
                display: flex;
                gap: 12px;
                flex-wrap: wrap;
            }
            .neo {
                --c: var(--primary);
                position: relative;
                padding: 12px 18px;
                border-radius: 10px;
                border: 1px solid rgba(0, 255, 156, 0.5);
                background: radial-gradient(
                    120% 120% at 0% 0%,
                    rgba(0, 255, 156, 0.15),
                    transparent 60%
                );
                color: var(--fg);
                text-decoration: none;
                text-transform: uppercase;
                letter-spacing: 1.2px;
                box-shadow: 0 0 18px rgba(0, 255, 156, 0.2),
                    inset 0 0 18px rgba(0, 255, 156, 0.15);
                transition: 0.18s ease;
                overflow: hidden;
            }
            .neo:hover {
                transform: translateY(-1px) scale(1.01);
            }
            .neo:after {
                content: '';
                position: absolute;
                inset: -120% -40%;
                background: conic-gradient(
                    from 0deg,
                    var(--primary),
                    var(--primary-2),
                    var(--danger),
                    var(--primary)
                );
                filter: blur(18px);
                opacity: 0.16;
                animation: spin 6s linear infinite;
            }
            @keyframes spin {
                to {
                    transform: rotate(360deg);
                }
            }

            /* Terminal */
            .terminal {
                background: linear-gradient(
                    180deg,
                    rgba(0, 224, 255, 0.06),
                    rgba(0, 255, 156, 0.04)
                );
                border: 1px solid rgba(0, 224, 255, 0.22);
                border-radius: 16px;
                padding: 18px 18px 10px;
                box-shadow: inset 0 0 38px rgba(0, 224, 255, 0.12);
                display: grid;
                grid-template-rows: auto 1fr;
                min-height: 260px;
                position: relative;
                overflow: hidden;
            }
            .term-head {
                display: flex;
                align-items: center;
                gap: 10px;
                padding-bottom: 8px;
                border-bottom: 1px dashed rgba(0, 224, 255, 0.25);
                color: var(--muted);
                font-size: 13px;
            }
            .leds span {
                display: inline-block;
                width: 9px;
                height: 9px;
                border-radius: 50%;
                margin-right: 6px;
                box-shadow: 0 0 12px currentColor;
            }
            .led-red {
                color: #ff5370;
            }
            .led-yellow {
                color: #ffd166;
            }
            .led-green {
                color: #00ffa6;
            }

            .term-body {
                padding: 12px 4px 8px 4px;
                overflow: hidden;
                position: relative;
                font-family: 'VT323', monospace;
                font-size: 18px;
                line-height: 1.3;
            }
            .term-scroll {
                position: absolute;
                inset: 0 0 0 0;
                overflow: hidden;
                padding: 0 8px 8px 8px;
                mask-image: linear-gradient(
                    to bottom,
                    transparent,
                    #000 12px,
                    #000 calc(100% - 20px),
                    transparent
                );
            }
            .line {
                white-space: pre-wrap;
            }
            .caret {
                display: inline-block;
                width: 9px;
                height: 16px;
                background: var(--primary);
                margin-left: 6px;
                box-shadow: 0 0 8px rgba(0, 255, 156, 0.7);
                animation: blink 1s steps(2) infinite;
            }
            @keyframes blink {
                50% {
                    opacity: 0.2;
                }
            }

            /* Info cards */
            .cards {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 12px;
                margin-top: 20px;
            }
            @media (max-width: 1080px) {
                .cards {
                    grid-template-columns: 1fr;
                }
            }
            .card {
                background: linear-gradient(
                    180deg,
                    rgba(0, 255, 156, 0.05),
                    rgba(0, 224, 255, 0.05)
                );
                border: 1px solid rgba(0, 255, 156, 0.18);
                border-radius: 12px;
                padding: 16px;
                position: relative;
                overflow: hidden;
            }
            .card h4 {
                margin: 0 0 6px 0;
                font-weight: 700;
                font-size: 13px;
                letter-spacing: 1.6px;
                color: var(--muted);
                text-transform: uppercase;
            }
            .metric {
                font-family: Orbitron, sans-serif;
                font-size: 32px;
                color: var(--fg);
                text-shadow: 0 0 12px rgba(0, 224, 255, 0.2);
            }
            .metric small {
                font-size: 12px;
                color: #a2fbe6;
                margin-left: 6px;
                opacity: 0.8;
            }

            /* Footer */
            footer {
                padding: 10px 28px 18px;
                font-size: 12px;
                color: #a3ffe9;
                opacity: 0.75;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            /* Cursor trail particles */
            .trail {
                position: fixed;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                pointer-events: none;
                will-change: transform, opacity;
                background: radial-gradient(
                    circle at 30% 30%,
                    #00ff9c,
                    transparent 70%
                );
                box-shadow: 0 0 16px rgba(0, 255, 156, 0.6);
                filter: blur(0.4px);
                z-index: 10;
            }

            /* Toggle switches */
            .togs {
                display: flex;
                align-items: center;
                gap: 12px;
                flex-wrap: wrap;
                font-size: 12px;
                color: #aefde8;
            }
            .switch {
                position: relative;
                display: inline-flex;
                align-items: center;
                gap: 8px;
                cursor: pointer;
                user-select: none;
            }
            .switch input {
                display: none;
            }
            .sw-body {
                width: 44px;
                height: 22px;
                border-radius: 22px;
                border: 1px solid rgba(0, 255, 156, 0.4);
                background: rgba(0, 255, 156, 0.08);
                position: relative;
                box-shadow: inset 0 0 12px rgba(0, 255, 156, 0.25);
                transition: 0.2s;
            }
            .sw-knob {
                position: absolute;
                top: 2px;
                left: 2px;
                width: 18px;
                height: 18px;
                border-radius: 50%;
                background: linear-gradient(180deg, #00ff9c, #00e0aa);
                box-shadow: 0 0 10px rgba(0, 255, 156, 0.6);
                transition: 0.2s ease;
            }
            .switch input:checked + .sw-body {
                background: rgba(0, 224, 255, 0.1);
                border-color: rgba(0, 224, 255, 0.5);
            }
            .switch input:checked + .sw-body .sw-knob {
                transform: translateX(22px);
                background: linear-gradient(180deg, #00e0ff, #00b7ff);
                box-shadow: 0 0 12px rgba(0, 224, 255, 0.6);
            }

            /* Fancy separators */
            .wire {
                height: 1px;
                width: 100%;
                background: linear-gradient(
                    90deg,
                    transparent,
                    rgba(0, 255, 156, 0.4),
                    rgba(0, 224, 255, 0.4),
                    transparent
                );
                filter: drop-shadow(0 0 6px rgba(0, 255, 156, 0.5));
                margin: 10px 0 14px;
            }
        </style>
    </head>
    <body>
        <!-- Background canvases -->
        <canvas id="bg3d"></canvas>
        <canvas id="matrix"></canvas>

        <!-- Top UI -->
        <div class="wrap">
            <header>
                <div class="brand">
                    <span class="icon"></span>
                    <span>NEON CORE</span>
                    <small
                        style="color: #a9ffe9; opacity: 0.7; margin-left: 8px"
                        >Build v0x404.CQ</small
                    >
                </div>
                <nav>
                    <a class="btn" href="#"
                        ><i class="fa-solid fa-house"></i> 返回首页</a
                    >
                    <a class="btn" href="#"
                        ><i class="fa-solid fa-bug"></i> 反馈异常</a
                    >
                    <a class="btn" href="#"
                        ><i class="fa-solid fa-shield-halved"></i> 安全中心</a
                    >
                </nav>
            </header>

            <main>
                <section class="hero">
                    <div class="wire"></div>
                    <div class="glitch" data-text="404">404</div>
                    <div class="subtitle" id="subtitle">
                        RESOURCE NOT FOUND // 资源丢失
                    </div>
                    <div class="actions">
                        <a class="neo" href="/"
                            ><i class="fa-solid fa-compass"></i> Take me home</a
                        >
                        <a class="neo" href="/"
                            ><i class="fa-solid fa-terminal"></i> 开启调试</a
                        >
                        <a class="neo" href="/"
                            ><i class="fa-solid fa-vr-cardboard"></i>
                            超载特效</a
                        >
                    </div>

                    <div class="cards">
                        <div class="card">
                            <h4>节点延迟</h4>
                            <div class="metric" id="metric-latency">
                                0<small>ms</small>
                            </div>
                            <div class="wire"></div>
                            <div class="togs">
                                <label class="switch">
                                    <input
                                        id="toggle-matrix"
                                        type="checkbox"
                                        checked
                                    />
                                    <span class="sw-body"
                                        ><span class="sw-knob"></span
                                    ></span>
                                </label>
                                <span>矩阵雨</span>

                                <label class="switch">
                                    <input
                                        id="toggle-grid"
                                        type="checkbox"
                                        checked
                                    />
                                    <span class="sw-body"
                                        ><span class="sw-knob"></span
                                    ></span>
                                </label>
                                <span>3D 网格</span>
                            </div>
                        </div>
                        <div class="card">
                            <h4>安全噪声</h4>
                            <div class="metric" id="metric-noise">
                                42<small>dB</small>
                            </div>
                            <div class="wire"></div>
                            <div class="togs">
                                <label class="switch">
                                    <input
                                        id="toggle-scan"
                                        type="checkbox"
                                        checked
                                    />
                                    <span class="sw-body"
                                        ><span class="sw-knob"></span
                                    ></span>
                                </label>
                                <span>扫描线</span>

                                <label class="switch">
                                    <input
                                        id="toggle-noise"
                                        type="checkbox"
                                        checked
                                    />
                                    <span class="sw-body"
                                        ><span class="sw-knob"></span
                                    ></span>
                                </label>
                                <span>屏幕噪点</span>
                            </div>
                        </div>
                        <div class="card">
                            <h4>控制台</h4>
                            <div class="metric" id="metric-ops">
                                0x0000<small>ops</small>
                            </div>
                            <div class="wire"></div>
                            <div class="togs">
                                <label class="switch">
                                    <input
                                        id="toggle-sounds"
                                        type="checkbox"
                                        checked
                                    />
                                    <span class="sw-body"
                                        ><span class="sw-knob"></span
                                    ></span>
                                </label>
                                <span>声音反馈</span>

                                <label class="switch">
                                    <input
                                        id="toggle-trail"
                                        type="checkbox"
                                        checked
                                    />
                                    <span class="sw-body"
                                        ><span class="sw-knob"></span
                                    ></span>
                                </label>
                                <span>光标尾迹</span>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="terminal">
                    <div class="term-head">
                        <div class="leds">
                            <span class="led-red"></span
                            ><span class="led-yellow"></span
                            ><span class="led-green"></span>
                        </div>
                        <strong style="letter-spacing: 1.2px"
                            >/dev/null — CONSOLE</strong
                        >
                        <span style="margin-left: auto; opacity: 0.8"
                            ><i
                                class="fa-solid fa-circle-radiation"
                                style="color: #00ff9c"
                            ></i>
                            ONLINE</span
                        >
                    </div>
                    <div class="term-body">
                        <div class="term-scroll" id="term-scroll"></div>
                    </div>
                </section>
            </main>

            <footer>
                <div>
                    © 2025 Neon Core. All rights preserved in green phosphor.
                </div>
                <div id="clock">--:--:-- CST</div>
            </footer>
        </div>

        <!-- Overlays -->
        <div class="crt"></div>
        <div class="crt-vignette"></div>
        <div class="noise" id="noise"></div>

        <!-- JS Libraries -->
        <script src="https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.4/howler.min.js"></script>

        <script>
            // Clock
            (function clock() {
                const el = document.getElementById('clock');
                const fmt = n => String(n).padStart(2, '0');
                setInterval(() => {
                    const d = new Date();
                    el.textContent = `${fmt(d.getHours())}:${fmt(
                        d.getMinutes()
                    )}:${fmt(d.getSeconds())} CST`;
                }, 500);
            })();

            // Sound FX
            const SFX = {
                enabled: true,
                click: new Howl({
                    src: [
                        'data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAESsAABErAAABAAgAZGF0YQgAAAAA/////wAAAP///wAAAP///wAAAP7+/gAAAP///w==',
                    ],
                    volume: 0.2,
                }),
                type: new Howl({
                    src: [
                        'data:audio/wav;base64,UklGRlQAAABXQVZFZm10IBAAAAABAAEAESsAABErAAABAAgAZGF0YWQAAAAA/////wD///8A////AP///wD+/v4A////AP///wA=',
                    ],
                    volume: 0.06,
                }),
            };
            document.addEventListener(
                'click',
                e => SFX.enabled && SFX.click.play()
            );

            // Toggle behaviors
            const $ = s => document.querySelector(s);
            const $id = s => document.getElementById(s);

            $id('toggle-sounds').addEventListener('change', e => {
                SFX.enabled = e.target.checked;
            });

            // Matrix rain
            const matrix = (function () {
                const canvas = document.getElementById('matrix');
                const ctx = canvas.getContext('2d');
                let W,
                    H,
                    cols,
                    drops,
                    running = true;
                const chars =
                    'アカサタナハマヤラワ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ$#{}[]<>/\\=+*-%';
                function resize() {
                    W = canvas.width = innerWidth;
                    H = canvas.height = innerHeight;
                    cols = Math.floor(W / 16);
                    drops = Array(cols)
                        .fill(0)
                        .map(() => Math.random() * H);
                }
                function draw() {
                    if (!running) return;
                    ctx.fillStyle = 'rgba(0, 10, 8, 0.2)';
                    ctx.fillRect(0, 0, W, H);
                    for (let i = 0; i < drops.length; i++) {
                        const txt =
                            chars[Math.floor(Math.random() * chars.length)];
                        const x = i * 16,
                            y = drops[i] * 1.0;
                        const hue = (y / H) * 120 + 140;
                        ctx.fillStyle = `hsl(${hue}, 100%, 60%)`;
                        ctx.shadowColor = 'rgba(0,255,156,0.6)';
                        ctx.shadowBlur = 8;
                        ctx.font = '16px "Share Tech Mono", monospace';
                        ctx.fillText(txt, x, y);
                        drops[i] += Math.random() * 3 + 2;
                        if (drops[i] > H || Math.random() < 0.005) drops[i] = 0;
                    }
                    requestAnimationFrame(draw);
                }
                addEventListener('resize', resize);
                resize();
                draw();
                return {
                    enable(v) {
                        running = v;
                        if (v) draw();
                        else ctx.clearRect(0, 0, W, H);
                    },
                };
            })();

            $id('toggle-matrix').addEventListener('change', e =>
                matrix.enable(e.target.checked)
            );

            // THREE.js — Neon wireframe grid with shader pulse
            (function () {
                const canvas = document.getElementById('bg3d');
                const renderer = new THREE.WebGLRenderer({
                    canvas,
                    antialias: true,
                    alpha: true,
                });
                renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
                renderer.setSize(innerWidth, innerHeight);

                const scene = new THREE.Scene();
                const camera = new THREE.PerspectiveCamera(
                    60,
                    innerWidth / innerHeight,
                    0.1,
                    1000
                );
                camera.position.set(0, 2.4, 4.8);

                const gridGeo = new THREE.PlaneGeometry(30, 30, 100, 100);
                const gridMat = new THREE.ShaderMaterial({
                    uniforms: {
                        uTime: { value: 0 },
                        uColorA: { value: new THREE.Color('#00ff9c') },
                        uColorB: { value: new THREE.Color('#00e0ff') },
                        uGlow: { value: 0.9 },
                    },
                    transparent: true,
                    vertexShader: `
          varying vec2 vUv;
          varying vec3 vPos;
          uniform float uTime;
          void main(){
            vUv = uv;
            vec3 pos = position;
            float d = length(pos.xz);
            pos.y += sin(d*1.2 - uTime*1.6)*0.22;
            vPos = pos;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);
          }
        `,
                    fragmentShader: `
          varying vec2 vUv;
          varying vec3 vPos;
          uniform vec3 uColorA;
          uniform vec3 uColorB;
          uniform float uGlow;
          float grid(vec2 uv, float res){
            vec2 g = abs(fract(uv*res - 0.5) - 0.5)/fwidth(uv*res);
            return 1.0 - min(min(g.x, g.y), 1.0);
          }
          void main(){
            float g = grid(vUv*20.0, 1.0);
            vec3 col = mix(uColorA, uColorB, vUv.y);
            float glow = smoothstep(0.0,1.0,g)*uGlow;
            gl_FragColor = vec4(col * glow, 0.55);
          }
        `,
                    wireframe: false,
                });
                const grid = new THREE.Mesh(gridGeo, gridMat);
                grid.rotation.x = -Math.PI / 2.2;
                grid.position.y = -1.2;
                scene.add(grid);

                const fog = new THREE.FogExp2(0x02110e, 0.25);
                scene.fog = fog;

                const clock = new THREE.Clock();
                let enabled = true;

                function onResize() {
                    renderer.setSize(innerWidth, innerHeight);
                    camera.aspect = innerWidth / innerHeight;
                    camera.updateProjectionMatrix();
                }
                addEventListener('resize', onResize);

                function animate() {
                    if (!enabled) return;
                    const t = clock.getElapsedTime();
                    grid.material.uniforms.uTime.value = t;
                    renderer.render(scene, camera);
                    requestAnimationFrame(animate);
                }
                animate();

                $id('toggle-grid').addEventListener('change', e => {
                    enabled = e.target.checked;
                    if (enabled) animate();
                    else renderer.clear();
                });
            })();

            // Subtitle scramble loop
            (function () {
                const el = document.getElementById('subtitle');
                const phrases = [
                    'RESOURCE NOT FOUND // 资源丢失',
                    'STACK TRACE LOST // 栈回溯失联',
                    'VECTOR OUT-OF-BOUNDS // 向量越界',
                    'NULL POINTER ECHO // 空指针回声',
                    'ROUTE 0x404 — CHONGQING NODE // 重庆节点',
                ];
                let i = 0;
                function scrambleTo(next) {
                    anime({
                        targets: el,
                        textContent: next,
                        round: 1,
                        duration: 1400,
                        easing: 'easeOutExpo',
                        update: function (anim) {
                            // lightweight fake glitch by randomizing some chars visually
                            const progress = anim.progress / 100;
                            if (Math.random() < 0.2)
                                el.style.filter = `hue-rotate(${
                                    Math.sin(progress * 6.28) * 12
                                }deg) brightness(${1 + Math.random() * 0.2})`;
                        },
                        complete: function () {
                            el.style.filter = '';
                        },
                    });
                }
                setInterval(() => {
                    i = (i + 1) % phrases.length;
                    scrambleTo(phrases[i]);
                }, 2600);
            })();

            // Terminal type simulation
            (function () {
                const el = document.getElementById('term-scroll');
                const caret = document.createElement('span');
                caret.className = 'caret';
                const pool = [
                    '[INFO] Initializing recovery pipeline...',
                    '[WARN] Route lookup failed: /missing/resource',
                    '[INFO] Retrying via gateway cq-03...',
                    '[ERROR] 0x404 NOT FOUND at hop[2]',
                    '[TRACE] GET /404 -> 302 -> /dev/null',
                    '[HEALTH] grid:stable matrix:active noise:on',
                    '[SCAN] signature mismatch — recalibrating...',
                    '[OK] Fallback engaged. Suggestions: home(), report(), search()',
                ];
                let idx = 0;
                let ops = 0;
                function appendLine(text) {
                    const line = document.createElement('div');
                    line.className = 'line';
                    el.appendChild(line);
                    el.appendChild(document.createElement('br'));
                    let i = 0;
                    const timer = setInterval(() => {
                        line.textContent = text.slice(0, i++) + ' ';
                        if (SFX.enabled && Math.random() < 0.7) SFX.type.play();
                        el.scrollTop = el.scrollHeight;
                        if (i > text.length) {
                            clearInterval(timer);
                        }
                    }, 16 + Math.random() * 22);
                    ops += Math.floor(text.length * (0.6 + Math.random()));
                    $id('metric-ops').innerHTML =
                        '0x' +
                        ops.toString(16).padStart(4, '0') +
                        '<small>ops</small>';
                }
                function loop() {
                    appendLine('$ ' + pool[idx++ % pool.length]);
                }
                // initial lines
                setTimeout(() => {
                    for (let k = 0; k < 3; k++) loop();
                }, 300);
                setInterval(loop, 1000);
            })();

            // Metrics playful updates
            (function () {
                const lat = $id('metric-latency');
                const noi = $id('metric-noise');
                setInterval(() => {
                    const v = Math.round(8 + Math.random() * 48);
                    lat.innerHTML = v + '<small>ms</small>';
                    const n = Math.round(30 + Math.random() * 24);
                    noi.innerHTML = n + '<small>dB</small>';
                }, 900);
            })();

            // Scanlines and noise toggles
            (function () {
                const scan = document.querySelector('.crt');
                const noise = document.getElementById('noise');
                $id('toggle-scan').addEventListener(
                    'change',
                    e =>
                        (scan.style.display = e.target.checked
                            ? 'block'
                            : 'none')
                );
                $id('toggle-noise').addEventListener(
                    'change',
                    e =>
                        (noise.style.display = e.target.checked
                            ? 'block'
                            : 'none')
                );
            })();

            // Cursor trail particles
            (function () {
                let enabled = true;
                $id('toggle-trail').addEventListener(
                    'change',
                    e => (enabled = e.target.checked)
                );
                const maxParticles = 120;
                let count = 0;
                function spawn(x, y) {
                    if (!enabled) return;
                    if (count > maxParticles) return;
                    const p = document.createElement('div');
                    p.className = 'trail';
                    p.style.left = x - 5 + 'px';
                    p.style.top = y - 5 + 'px';
                    document.body.appendChild(p);
                    const life = 700 + Math.random() * 600;
                    const dx = (Math.random() - 0.5) * 60;
                    const dy = (Math.random() - 0.5) * 60;
                    p.animate(
                        [
                            {
                                transform: `translate(0,0) scale(1)`,
                                opacity: 1,
                            },
                            {
                                transform: `translate(${dx}px, ${dy}px) scale(${
                                    0.2 + Math.random() * 0.5
                                })`,
                                opacity: 0,
                            },
                        ],
                        { duration: life, easing: 'cubic-bezier(.2,.6,.2,1)' }
                    ).onfinish = () => {
                        p.remove();
                        count--;
                    };
                    count++;
                }
                addEventListener('mousemove', e => {
                    for (let i = 0; i < 2; i++) spawn(e.clientX, e.clientY);
                });
                addEventListener('click', e => {
                    for (let i = 0; i < 14; i++) spawn(e.clientX, e.clientY);
                });
            })();

            // Easter egg: press keys to glitch "404"
            (function () {
                const g = document.querySelector('.glitch');
                let pulse = 0;
                function bump() {
                    pulse++;
                    g.style.textShadow = `0 0 8px rgba(0,255,156,0.9),
                              0 0 26px rgba(0,255,156,0.6),
                              -10px 0 16px rgba(0,224,255,0.4),
                              10px 0 16px rgba(255,47,107,0.35)`;
                    g.animate(
                        [
                            {
                                filter: 'contrast(1) saturate(1) hue-rotate(0deg)',
                            },
                            {
                                filter: 'contrast(1.4) saturate(1.3) hue-rotate(12deg)',
                            },
                            {
                                filter: 'contrast(1) saturate(1) hue-rotate(0deg)',
                            },
                        ],
                        { duration: 280, easing: 'ease-out' }
                    );
                    setTimeout(() => {
                        pulse = Math.max(0, pulse - 1);
                    }, 200);
                }
                addEventListener('keydown', bump);
                addEventListener('click', bump);
            })();

            // Accessibility least: allow pressing H to go home
            (function () {
                addEventListener('keydown', e => {
                    if (e.key.toLowerCase() === 'h') {
                        const a = document.querySelector('.actions .neo');
                        a.classList.add('animate__animated', 'animate__tada');
                        setTimeout(
                            () =>
                                a.classList.remove(
                                    'animate__animated',
                                    'animate__tada'
                                ),
                            800
                        );
                    }
                });
            })();
        </script>
    </body>
</html>
